<template>
	<view v-if="show || isSuperAdmin" class="filter-box flex-row">
		<view v-if="isSuperAdmin" class="check-options">
			<view
				v-for="(i, index) of actions[tabCurrent === 0 ? 'installer' : 'inspector']"
				:key="index"
				:class="['check-option', checkedAction === index && 'checked']"
				@click="handleActionChange(index, i)"
			>
				{{ i.name }}
			</view>
		</view>
		<view v-else class="flex-row">
			<!-- <view class="label">日期筛选：</view>
			<picker mode="date" :end="getDate()" @change="handleDateChecked($event, 1)">
				<view class="date-picker">
					<image class="time-icon" src="/static/management/time.png" />
					{{ checkedDate || '请选择' }}
				</view>
			</picker>
			<view v-if="!!checkedDate" style="padding-left: 20rpx">
				<uni-icons type="close" size="32rpx" @click="handleDateClear"></uni-icons>
			</view> -->
		</view>
		<view class="status-selection flex-row">
			<view class="normal-flow flex-row" @click="onClickFilter">
				<image class="filter-icon" src="/static/management/filter.png" />
				{{ isSuperAdmin ? '筛选' : checkedStatus.name }}
			</view>
			<view :class="['toggle-flow', showChecked && 'show']">
				<view v-for="i of equipmentStatus" :key="i.id" :class="['option-item', checkedStatus.id === i.id && 'checked']" @click="handleFilterChange(i)">
					{{ i.name }}
				</view>
			</view>
		</view>
	</view>
	<uni-popup ref="popupRef" type="right" @change="onPopupChange">
		<view class="container flex flex-col">
			<view class="options">
				<view class="label">所属组织</view>
				<picker mode="selector" :range="organizationList" range-key="organization_name" @change="handleOrganizationChecked">
					<view :class="['selection flex-row', !checkedOrganizationText && 'empty']">
						{{ checkedOrganizationText || '请选择' }}
						<text class="iconfont icon-arrow-right"></text>
					</view>
				</picker>
				<template v-if="tabCurrent === 1">
					<view class="label">查看日期</view>
					<picker mode="date" :end="getDate()" @change="handleDateChecked($event, 2)">
						<view :class="['selection flex-row', !checkedDateText && 'empty']">
							{{ checkedDateText || '请选择' }}
							<text class="iconfont icon-arrow-right"></text>
						</view>
					</picker>
				</template>
				<template v-if="(tabCurrent === 0 && checkedAction !== 0) || tabCurrent !== 0">
					<view class="label">{{ tabCurrent === 0 ? '设备状态' : '巡检结果' }}</view>
					<picker mode="selector" :range="equipmentStatus" range-key="name" @change="handleResultChecked">
						<view :class="['selection flex-row', !checkedResultText && 'empty']">
							{{ checkedResultText || '请选择' }}
							<text class="iconfont icon-arrow-right"></text>
						</view>
					</picker>
				</template>
			</view>
			<button class="btn-primary btn-confirm" @click="handleConfirm">确认</button>
		</view>
	</uni-popup>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import { getDate } from '@/utils';
import { useUserStore } from '@/store/user';
import { fetchOrganizationList } from '@/api';

const props = defineProps({
	tabCurrent: {
		type: Number,
		default: 0
	},
	actions: {
		type: Object,
		default: () => ({
			installer: [],
			inspector: []
		})
	}
});

const emit = defineEmits(['confirm']);

const userStore = useUserStore();
const checkedDate = ref('');
const popupRef = ref();
const popupStatus = ref(false);
const showChecked = ref(false);
const checkedAction = ref(0);
const checkedStatus = ref({
	id: Infinity,
	name: '全部'
});
const organizationList = ref([]);
const checkedOrganizationText = ref('');
const checkedDateText = ref('');
const checkedResultText = ref('');
const equipmentStatus = [
	{
		id: Infinity,
		name: '全部'
	},
	{
		id: 0,
		name: '正常'
	},
	{
		id: 1,
		name: '异常'
	}
];

// /**所属组织id */
// organization_id: 0,
// /**状态：0未安装，1已安装 */
// type: 0,
// /**时间筛选 */
// create_at: 0,
// /**是否异常：全部为空，0否，1是 */
// is_abnormal: '',
// /**巡检状态 1待巡检 2已巡检 */
// patrol_state: 0
let submitFields = {};

const show = computed(() => [5, 6].includes(userStore.userInfo.authorize) && props.tabCurrent !== 0);
const isSuperAdmin = computed(() => [0, 1].includes(userStore.userInfo.authorize));

onMounted(() => {
	isSuperAdmin && fetchOrganizationList().then((res) => (organizationList.value = res));
});

watch(
	() => props.tabCurrent,
	() => {
		submitFields = {};
		checkedAction.value = 0;
		checkedDateText.value = '';
		checkedOrganizationText.value = '';
		checkedResultText.value = '';
	}
);

function handleFilterChange(i) {
	checkedStatus.value = i;
	if (i.id === Infinity) submitFields.is_abnormal = '';
	else submitFields.is_abnormal = i.id;
	showChecked.value = false;
	emit('confirm', submitFields);
}

function handleDateClear() {
	checkedDate.value = '';
	submitFields.create_at = '';
	emit('confirm', submitFields);
}

function handleActionChange(index, i) {
	if (index !== checkedAction.value) {
		checkedAction.value = index;
		submitFields[i.key] = i.id;
		emit('confirm', submitFields);
	}
}

function onClickFilter() {
	if (show.value) {
		showChecked.value = !showChecked.value;
	}
	if (isSuperAdmin.value) {
		popupStatus.value ? popupRef.value?.close() : popupRef.value?.open();
	}
}

function handleOrganizationChecked(e) {
	const { value } = e.detail;
	checkedOrganizationText.value = organizationList.value[value].organization_name;
	submitFields.organization_id = organizationList.value[value].organization_id;
}

function handleDateChecked(e, type) {
	const { value } = e.detail;
	type === 1 && (checkedDate.value = value);
	type === 2 && (checkedDateText.value = value);
	submitFields.create_at = value;
	emit('confirm', submitFields);
}

function handleResultChecked(e) {
	const { value } = e.detail;
	checkedResultText.value = equipmentStatus[value].name;
	submitFields.is_abnormal = equipmentStatus[value].id;
}

function onPopupChange(e) {
	popupStatus.value = e.show;
}

function handleConfirm() {
	emit('confirm', submitFields);
	popupRef.value?.close();
}
</script>

<style scoped lang="scss">
.filter-box {
	height: 128rpx;
	padding-left: 30rpx;
	padding-right: 30rpx;
	background-color: #f8f8f8;
	column-gap: 36rpx;
	.check-options {
		flex: 1;
		display: flex;
		column-gap: 20rpx;
		.check-option {
			flex: 1;
			height: 68rpx;
			color: #4771f6;
			font-size: 28rpx;
			border-radius: 8rpx;
			background-color: #fff;
			box-shadow: inset 0 0 0 2rpx #4771f6;
			display: flex;
			align-items: center;
			justify-content: center;
			&.checked {
				color: #fff;
				background-color: #4771f6;
			}
		}
	}
	.label {
		color: #333;
		font-size: 28rpx;
	}
	.date-picker {
		width: 260rpx;
		height: 68rpx;
		padding-left: 26rpx;
		padding-right: 26rpx;
		border-radius: 8rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		column-gap: 20rpx;
		color: #333;
		font-size: 24rpx;
		.time-icon {
			width: 30rpx;
			height: 30rpx;
		}
	}
	.status-selection {
		flex-shrink: 0;
		width: 154rpx;
		height: 68rpx;
		border-radius: 8rpx;
		background-color: #ffffff;
		position: relative;
		.normal-flow {
			position: absolute;
			inset: 0;
			color: #333;
			font-size: 28rpx;
			padding-left: 24rpx;
			padding-right: 24rpx;
			.filter-icon {
				width: 36rpx;
				height: 34rpx;
			}
		}
		.toggle-flow {
			position: absolute;
			top: calc(100% + 30rpx);
			width: 100%;
			border-radius: 8rpx;
			background-color: #ffffff;
			filter: drop-shadow(0 2rpx 6rpx rgba(0, 0, 0, 0.1));
			opacity: 0;
			transform: scale(0);
			transform-origin: top;
			transition: transform 300ms ease, opacity 300ms;
			&::after {
				content: '';
				position: absolute;
				border-left: 20rpx solid transparent;
				border-right: 20rpx solid transparent;
				border-bottom: 20rpx solid #ffffff;
				bottom: 100%;
				left: calc(50% - 20rpx);
			}
			&.show {
				opacity: 1;
				transform: scale(1);
			}
			.option-item {
				color: #333;
				font-size: 26rpx;
				height: 84rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				& + .option-item {
					border-top: 2rpx solid #efefef;
				}
				&.checked {
					color: $primary-color;
				}
			}
		}
	}
}
.container {
	width: 410rpx;
	height: 100%;
	// 128rpx 筛选高度 88rpx tab栏高度 40rpx 内边距
	padding-top: calc(128rpx + 88rpx + 40rpx);
	padding-left: 30rpx;
	padding-right: 30rpx;
	padding-bottom: 70rpx;
	box-sizing: border-box;
	background-color: #fff;
	.options {
		flex: 1;
		.label {
			color: #333;
			font-weight: bold;
		}
		.selection {
			padding: 20rpx;
			margin-top: 20rpx;
			margin-bottom: 40rpx;
			border-radius: 8rpx;
			color: #333;
			font-size: 28rpx;
			background-color: #f8f8f8;
			.icon-arrow-right {
				color: #333;
			}
			&.empty {
				color: #999;
			}
		}
	}
	.btn-confirm {
		width: 100%;
	}
}
</style>
